<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

    <head>
        <title>Realtime web chat</title>
        <meta http-equiv="Content-Type"
              content="text/html; charset=UTF-8; width=device-width; initial-scale=1.0"
              name="viewport" />
        <link rel="stylesheet" type="text/css" media="all" href="assets/lib/bootstrap/css/bootstrap.css"
              th:href="@{assets/lib/bootstrap/css/bootstrap.css}" />
        <link rel="stylesheet" type="text/css" media="all" href="assets/common/main.css"
              th:href="@{assets/common/main.css}" />
    </head>


    <body>

        <div class="container">
            <div data-bind="visible: showErrorMessage" class="alert alert-error">
                <span th:utext="#{login.error.username}">Invalid username/password</span>
            </div>

            <form class="form-signin" method="post" accept-charset="UTF-8" action="login" th:object="${user}">
                <div class="right">
                    <a href="signup" th:href="@{/signup}">
                        <span th:utext="#{login.registration}">Registration</span>
                    </a>
                </div>
                <h3 class="muted form-signin-heading" th:utext="#{login.header}">Please sign in</h3>
                <div class="control-group">
                    <div class="controls">
                        <input type="text" class="input-block-level form-control"  name="username"
                           th:placeholder="#{login.input.username.placeholder}" />
                        <p class="error" th:each="err : ${#fields.errors('userName')}" th:text="${err}" />
                    </div>
                </div>
                <div class="control-group">
                    <div class="controls">
                        <input type="password" class="input-block-level form-control" name="password"
                            th:placeholder="#{login.input.password.placeholder}" />
                        <p class="error" th:each="err : ${#fields.errors('password')}" th:text="${err}" />
                    </div>
                </div>
               <button class="btn btn-primary" type="submit" >
                    <span th:utext="#{login.signin.button}">Log in</span>
                </button>
                <hr/>
                <div class='links'>
                    <a href="users/password/new">
                        <span th:utext="#{login.forgot.password}">Forgotten your password?</span>
                    </a>
                </div>
            </form>
        </div>

        <script src="assets/lib/knockout/knockout.js"></script>
        <script type="text/javascript">
            ko.applyBindings({
            showErrorMessage : ko.computed(function() {
            var query = window.location.search;
            return query ? (query.indexOf('error') != -1) : false;
            })
            });
        </script>

    </body>
</html>